<template>
  <div>
    <el-card shadow="never">
      <ZwSearchForm row-num="3" :option="searchOption" @search="search" @reset="reset" />
      <ZwTable ref="tableRef" class="table-box" :option="tableOption" :fetch-params="state.searchParams"
        :fetch-api="fetch()"> </ZwTable>
      <FailDetail :isopen="isopen" :title="title" :rowid="rowid" @close="isopen = false"></FailDetail>
    </el-card>
  </div>
</template>


<script setup lang="tsx">
import { ref, reactive, computed } from 'vue'
import ZwTable from '@/components/zw/table/Table'
import ZwSearchForm from '@/components/zw/search-form/SearchForm'
import FailDetail from '../components/FailDetail.vue'

import { exportDetail } from '@/api/customerCenter/customerSea'
import { deepCopy } from '@/utils/helper'
import router from '@/router'

const isopen = ref(false)
const rowid = ref('')
const title = ref('')
const tableRef = ref<HTMLElement | null>(null)
const defaultParams = {}
const state = reactive({
  searchParams: deepCopy(defaultParams)
})
const tableOption = [
  {
    prop: 'file_name',
    label: 'Excel名称',
    width: 380,
    render({ row }) {
      return row?.file_name || '--'
    }
  },
  {
    prop: 'created_user',
    label: '导入员工',
    width: 160,
    render({ row }) {
      return row?.created_user || '--'
    }
  },
  {
    label: '上传时间',
    prop: 'created_at',
    width: 220,
    render({ row }) {
      return row?.created_at || '--'
    }
  },
  {
    prop: 'add_num',
    label: '已添加企微信/未添加企微信/总人数',
    width: 280,
    render({ row }) {
      return row.add_num + '/' + row.not_add_num + '/' + row.import_success_num
    }
  },
  {
    prop: 'import_success_num',
    label: '导入成功/导入失败',
    width: 280,
    render({ row }) {
      return row.import_success_num + '/' + row.import_fail_num
    }
  },
  {
    prop: 'add_rate',
    label: '添加完成率',
    minWidth: 180,
    render({ row }) {
      return row?.add_rate || '--'
    }
  },
  {
    prop: 'operate',
    label: '操作',
    width: 120,
    fixed: 'right',
    isOperate: true,
    renderOperate({ row }) {
      if(row.import_fail_num > 0){
        return (
          <>
            <ElButton
              size="small"
              onClick={() => {
                rowid.value = row.id
                title.value = row.name ? `失败详情【${row.name }】` : '失败详情'
                isopen.value = true
              }}
            >
              失败详情
            </ElButton>
          </>
        )
      }else{
        return '--'
      }
    }
  }
]
const searchOption = computed(() => {
  return [
    {
      label: 'Excel',
      name: 'name',
      value: '',
      type: 'input',
      placeholder: '请输入Excel名称进行搜索'
    },
    // {
    //   label: '区间',
    //   name: 'section222',
    //   unit: '元',
    //   value: [],
    //   type: 'section',
    // },
    {
      label: '导入员工',
      name: 'work_user_id',
      value: [],
      type: 'select',
      placeholder: '选择员工',
      multiple: true,
      popperClass: 'zw-hide_select_option',
      isUserSelect: true,
      formatOption: (v) => ({
        label: v.name,
        value: v.id
      })
    },
    {
      label: '上传时间',
      name: 'created_at',
      value: [],
      type: 'datePicker',
      datePickerType: 'daterange',
      datePickerFormat: 'YYYY-MM-DD HH:mm:ss',
      valueFormat: 'YYYY-MM-DD HH:mm:ss',
      startPlaceholder: '开始日期',
      endPlaceholder: '结束日期'
    }
  ]
})

const fetch = () => {
  return new Promise(resolve => {
    const page_size = 15
    resolve([{ }, exportDetail])
  })
}
//查询
const search = (v) => {
  console.log('v - -  ', v)
  state.searchParams = v
}
//清空
const reset = (v) => {
  state.searchParams = deepCopy(defaultParams)
}
</script>
<style scoped lang="scss">
</style>
